{% extends 'common/panel.html' %}
{% block head %}
        <!-- Dont mod this without modifying template/common.base.html first -->
        <link rel="stylesheet" href="{{MEDIA_URL}}common/css/chart.css" type="text/css" media="all" title="no title" charset="utf-8"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
        <link type="text/css" href="http://jqueryui.com/themes/base/jquery.ui.all.css" rel="stylesheet" /> 
        <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.core.js"></script> 
        <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.widget.js"></script> 
        <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script> 
        <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.slider.js"></script> 
{% endblock head %}
{% block title %}{{mpa.name}} Representation Report{% endblock title %}
{% block panel %}


    <div class="tabs">
        <ul>
            <li><a href="#ActivitiesChartTab"><span>Chart</span></a></li>
            <li><a href="#ActivitiesDataTable"><span>Data Table</span></a></li>
            <li><a href="#AdjustThreatsTab"><span>Adjust Threat Values</span></a></li>
        </ul>

        <div id="ActivitiesChartTab">
            <div style="width:450px; overflow:hidden;" class="habitat_representation" id="ActivitiesChart"></div>
            <script type="text/javascript" charset="utf-8">
            var hab_data = JSON.parse('{ {% for stats in impacts %}"{{stats.raster.full_name}}": {"sort": 1, "result":{% if stats.avg %}{{stats.avg}}{% else %}0.0{% endif %}, "units": "miles", "percent_of_total": {% if stats.avg %}{{stats.avg}}{% else %}0.0{% endif %}, "feature_map_id": 112, "org_scheme_id": 9},{% endfor %} }');
		lingcod.onShow('#ActivitiesChartTab', function(ui){
			var el = $('#ActivitiesChart');
			var report = lingcod.persistentReports['Activities'];
			if(report){
				$('#ActivitiesChart').append(report.paper.canvas);
				report.update(hab_data, true);
			}else{
			    var report = zones.rasterReport($('#ActivitiesChart'), hab_data, true);
			    if(!$.browser.msie){
				lingcod.persistentReports['Activities'] = report;
			    }
			}					
		});
            </script>
        </div>

   <div id="ActivitiesDataTable">

     <table width="100%" class="hab_repr_container">
     <tr> <th>Human Activity</th><th>Average</th><th>Min</th><th>Max</th><!-- <th>Median</th><th>StDev</td><th>Nulls</th><th>Pixels</th> --> </tr>

  {% for stats in impacts %}
   {% if stats.pixels %}
     <tr class="{% cycle '' 'grey' %}">
	<td>{{stats.raster.full_name}}</td>
	<td>{{stats.avg|floatformat:"-3"}}</td>
	<td>{{stats.min|floatformat:"-3"}}</td>
	<td>{{stats.max|floatformat:"-3"}}</td>
     </tr>
   {% else %}
     <tr>
          <th>{{stats.raster.full_name}}</th><td colspan="7">Processing not complete.</td>
     </tr>
   {% endif %}
  {% endfor %}
     </table>
   </div>

  
  <div id="AdjustThreatsTab">
    {% if sum_avg_threat %}
    <form id="threat_form">
        <h3> Current Cumulative Impact =  <input style="border: 0pt none; font-weight:bold;" type="text" id="current" readonly="readonly" value="{{sum_avg_threat|floatformat:"-3"}}" /> </h2>
        <h3> Adjusted Cumulative Impact = <input style="border: 0pt none; font-weight:bold;" id="sum_adjusted" type="text" value="{{sum_avg_threat|floatformat:"-3"}}" readonly="readonly" /> </h2>
      <table style="font-size:8pt;"> 
          <tr> <th> Activity </th><th>slider</th><th> Value </th> </tr>
    {% for stats in impacts %}
        {% if stats.pixels %}
        <tr><td>{{stats.raster.full_name}}</td><td><div id="slider_{{stats.raster.name}}" style="padding-left:10px; width:80px"></div></td> <td width="50px"> <input class="threat" type="text" id="input_{{stats.raster.name}}" name="{{stats.raster.name}}" value="{{stats.avg|floatformat:"-3"}}" style="border: 0pt none;width:40px;" /> </td></tr>
        {% else %}
            <p>{{stats.raster.full_name}}: Processing not complete.</p>
        {% endif %}
    {% endfor %}
      </table>

    </form>

    <style type="text/css">
        /* Slider
        ----------------------------------*/
        .ui-slider { position: relative; text-align: left; }
        .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
        .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

        .ui-slider-handle { border: 1px solid #ccc;background-color: #ddd; position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
        .ui-slider-horizontal { height: .8em; border:1px solid #ccc; background-color: #eee;  }
        .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
        .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
        .ui-slider-horizontal .ui-slider-range-min { left: 0; }
        .ui-slider-horizontal .ui-slider-range-max { right: 0; }
    </style>

    <script type="text/javascript" charset="utf-8">
        function recalc() {
            var sum_adjusted = 0.0;
            $('.threat').each(function(index) {
                sum_adjusted += parseFloat($(this).val()); 
            });
            $('#sum_adjusted').val(sum_adjusted.toFixed(5));
        }

		lingcod.onShow('#AdjustThreatsTab', function(ui){
            var inval;
            $('.threat').change(function() {
                inval = $(this).val();
                recalc();
            });

            {% for stats in impacts %}
            $(function() {
                var themax = {{stats.avg}} * 2;
                if (themax<0.001) { 
                    themax = 0.5;
                }
                $("#slider_{{stats.raster.name}}").slider({
                    value: {{stats.avg}},
                    min: 0,
                    max: themax,
                    step: themax / 80,
                    slide: function(event, ui) {
                        $("#input_{{stats.raster.name}}").val(ui.value.toFixed(3));
                        recalc();
                    }
                });
            });
            {% endfor %}

		});


    </script>

   {% else %}
    <p>Processing not complete.</p>
   {% endif %}
  </div>

{% endblock panel %}
